<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>

        <script>
            /** @type {HTMLCanvasElement} */
            const canvas = document.querySelector("#canvas");
            const ctx = canvas.getContext("2d");

            // let lg = ctx.createLinearGradient(0, 0, 0, 210);
            // lg.addColorStop(0, "#000");
            // lg.addColorStop(0.25, "red");
            // lg.addColorStop(0.75, "blue");
            // lg.addColorStop(1, "#fff");
            // let rg=ctx.createRadialGradient(110,110,0,110,100,100)
            // rg.addColorStop(0, "#000");
            // rg.addColorStop(0.25, "red");
            // rg.addColorStop(0.75, "blue");
            // rg.addColorStop(1, "#fff");
            ctx.save()
            ctx.shadowBlur=30
            ctx.shadowColor='red'

            ctx.fillStyle = 'red';
            ctx.fillRect(30,30,200,200)

            ctx.restore()

            ctx.shadowBlur=30
            ctx.shadowColor='green'
            ctx.fillStyle = 'green';
            ctx.fillRect(310,30,200,200)
        </script>
    </body>
</html>
